<template>
  <div class="editperson"> 
    <h1>添加人员</h1>
    <div class="editform">
      <form @submit.prevent="editform()">
        <p>
          <input type="text" placeholder="请输入注册姓名" required v-model.lazy.trim="objF.uname">
        </p>
        <aside>
          <input type="radio" value="0" name="gender" v-model="objF.gender"><span>女</span>
          <input type="radio" value="1" name="gender" v-model="objF.gender"><span>男</span>
        </aside>
        <p>
          <input type="number" min="18" max="70" placeholder="请输入年龄" required v-model.lazy.trim="objF.age">
        </p>
        <p>
          <!-- 将v-model所获取到的value值转换成数字类型数据 -->
          <select required v-model="objF.port">
            <option value="" disabled>----请选择职务---</option>
            <option value="1">老板</option>
            <option value="2">总经理</option>
            <option value="3">部门主管</option>
            <option value="4">组长</option>
            <option value="5">员工</option>
          </select>
        </p>
        <p>
          <input type="number" min="2500" placeholder="请输入薪资" required v-model.lazy.trim="objF.salary">
        </p>
        <p>
          <input type="date" placeholder="请选择入职日期" required v-model="objF.ctime">
        </p>
        <article>
          <input type="submit" value="修改数据">
        </article>
      </form>
    </div>
    
    <!-- <table border="1" cellpadding="0" cellspacing="0">
      <tr>
        <th>姓名</th>
        <td><input type="text" required placeholder="添加姓名"></td>
      </tr>
      <tr>
        <th>性别</th>
        <td><input type="radio" name="xin" id="1"><label>男</label>
        <input type="radio" name="xin" id="0"><label>女</label>
        </td>
      </tr>
      <tr>
        <th>年龄</th>
        <td><input type="number" min="18" max="70" required placeholder="添加年龄，最低18，最高70"></td>
      </tr>
      <tr>
      <th>职务</th>
      <td><input type="radio" name="zy" id="1"><label>老板</label>
      <input type="radio" name="zy" id="2"><label>总经理</label>
      <input type="radio" name="zy" id="3"><label>部门主管</label>
      <input type="radio" name="zy" id="4"><label>组长</label>
      <input type="radio" name="zy" id="5"><label>员工</label>
      </td>
      </tr>
      <tr>
        <th>薪资</th>
        <td><input type="number" min="2500" required placeholder="工资最低不少于2500"></td>
      </tr>
      <tr>
        <th>入职时间</th>
        <td><input type="data" required placeholder="格式：xxxx-xx-xx"></td>
      </tr>
    </table>   -->
  </div>
</template>

<script>
//map方法：是Vue3对于vuex的快捷应用方式
import { mapState,mapMutations } from 'vuex';
// let staffList=[]
export default {
    name:"EditPerson",
    data(){
      return{
        ind:'',
        //整个表单对应的对象
        objF:{
        uname:'',
        gender:0,
        age:18,
        port:'',
        salary:2500,
        ctime:'',
        }
      }
    },
    //生命周期函数
    mounted(){
        this.ind=this.$route.query.i;
        let obj=this.plist[this.ind];

        this.objF={
            uname:obj.uname,
            gender:obj.gender,
            age:obj.age,
            port:obj.port,
            salary:obj.salary,
            ctime:obj.ctime
        }
    },
    methods:{
        ...mapMutations(['editlist']),
        //提交表单事件
        editform(){
            let nowtime = new Date().getTime();
            let Ctime = new Date(this.objF.ctime).getTime();
            if(Ctime > nowtime){
                alert('入职时间不得高于当前系统时');
                return
            }
            this.editlist({val:this.objF,id:this.ind})
        }
    },
    computed:{
        ...mapState(['plist']),
    }
}
</script>

<style scoped>
.editperson{
  width: 100%;
  height: 100%;
  position: relative;
  text-align: center;
}
/* table{
  margin: auto;
} */
 .editperson .editform{
  width: 60%;
  overflow: hidden;
  box-shadow: 0px 0px 5px;
  border-radius: 8px;
  margin: 25px auto;
 }
 .editperson .editform p,.addperson .addform article{
  width: 100%;
  display: flex;
  justify-content: center;
  height: 50px;
  margin-top: 25px;
 }
 .editperson .editform article input{
  width: 80%;
  height: 60px;
  margin-bottom: 30px;
 }
 .editperson .editform aside{
  width: 100%;
  display: flex;
  align-items: center;
  height: 50px;
  justify-content: center;
 }
 .editperson .editform p input{
  width: 80%;
  height: 70%;
 }
 .editperson .editform p select{
  width: 80%;
  border-radius: 6px;
 }
</style>